<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%@include file="../header.jsp" %>
<script>
	var currentPage = 1;	//声明当前页
	
	$(function(){
		bindRole();
		bindUserlist(currentPage);
		bindEvent()
	})
	
	function bindRole(){
		$.get("listRole",function(msg){
			var str = "";
			$(msg).each(function(i){
				var r = msg[i]
				str += "<option value='"+r.id+"'>"
				str += r.rolename
				str += "</option>"
			})
			$("#userRole").append(str)
		},"json");
	}
	
	function bindUserlist(currentPage){
		var name = $("#name").val();
		var userRole = $("#userRole").val();
	
		$.post("listUsers",{"name" : name,"userRole" : userRole,"currentPage" : currentPage},function(msg){
			var str = "";
			$(msg.list).each(function(i){
				var u = msg.list[i]
				str += "<tr>"
				str += "<td>"		
				str += "<span>"+u.usercode+"</span>"		
				str += "</td>"		
				str += "<td>"		
				str += "<span>"+u.username+"</span>"		
				str += "</td>"		
				str += "<td>"		
				str += "<span>"			
				str += u.gender == 0 ? "男" : "女" 				
				str += "</span>"			
				str += "</td>"			
				str += "<td>"		
				str += "<span>"+u.birthday+"</span>"		
				str += "</td>"		
				str += "<td>"	
				str += "<span>"+u.phone+"</span>"		
				str += "</td>"		
				str += "<td>"		
				str += "<span>"+u.userrole.rolename+"</span>"		
				str += "</td>"			
				str += "<td>"		
				str += '<span><a class="viewUser" data-id="'+u.id+'" href="javascript:;"><img src="statics/images/read.png" alt="查看" title="查看"/></a></span>'		
				str += '<span><a class="modifyUser" data-id="'+u.id+'" href="javascript:;"><img src="statics/images/xiugai.png" alt="修改" title="修改"/></a></span>'		
				str += '<span><a class="deleteUser" data-id="'+u.id+'" href="javascript:;"><img src="statics/images/schu.png" alt="删除" title="删除"/></a></span>'		
				str += "</td>"		
				str += "</tr>"		
			})
			$(".providerTable tr:not(:first)").remove();
			$(".providerTable").append(str);
			$("#count").html(msg.count);
			$("#currentPage").html(currentPage);
			$("#totalPage").html(msg.totalPage);
		},"json");
	}
	
	function bindEvent(){
		$("#searchbutton").click(function(){
			currentPage = 1;
			bindUserlist(currentPage);
		})
		
		//查看按钮
		/**通过ajax动态拼接的页面文本，是页面加载后，拼装上去的，
		      给元素赋予事件的写法，在页面元素加载前，进行事件绑定的
		$(".viewUser").click(function(){
			alert(1)
		})
		*/ 
		//动态绑定  on或delegate(委托)
		$(".providerTable").delegate(".viewUser","click",function(){
			//var id = $(this).attr("data-id");
			//和上面 等价
			var id = $(this).data("id")
			window.location = "getUserById/"+id;
		})
		/*$(".providerTable").on("click",".viewUser",function(){
			alert(2)
		})*/
		//修改按钮
		$(".providerTable").delegate(".modifyUser","click",function(){
			var id = $(this).data("id")
			window.location = "toUserModify?id="+id
		})
		
		
		
		var id;
		//删除按钮
		$(".providerTable").delegate(".deleteUser","click",function(){
			$(".zhezhao,.remove").show();
			id = $(this).data("id");
			
		})
		
		
		//确认按钮
		$("#yes").click(function(){
			window.location = "deleteUser?id="+id
		})
		
		//取消按钮
		$("#no").click(function(){
			$(".zhezhao,.remove").hide();
		})
		
		//首页
		$(".first").click(function(){
			
			currentPage = 1
			bindUserlist(currentPage)
		})
		
		//上一页
		$(".prev").click(function(){
			if(currentPage == 1){
				return;
			}
			currentPage--
			bindUserlist(currentPage)
		})
		//下一页
		$(".next").click(function(){
			if(currentPage == $("#totalPage").html()){
				return;
			}
			currentPage++
			bindUserlist(currentPage)
		})
		
		//最后一页
		$(".last").click(function(){
			currentPage = parseInt($("#totalPage").html())
			bindUserlist(currentPage)
		})
		
		//跳转
		$(".page-btn").click(function(){
			currentPage = parseInt($("#inputPage").val())
			bindUserlist(currentPage)
		})
	}
</script>

<c:if test="${requestScope.deleteFlag==0 }">
	<script>
		alert("删除失败")
	</script>
</c:if>
<c:if test="${requestScope.deleteFlag==1 }">
	<script>
		alert("删除成功")
	</script>
</c:if>

<c:if test="${requestScope.updateFlag==0 }">
	<script>
		alert("修改失败")
	</script>
</c:if>
<c:if test="${requestScope.updateFlag==1 }">
	<script>
		alert("修改成功")
	</script>
</c:if>
<div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面</span>
            </div>
            <div class="search">
					 <span>用户名：</span>
					 <input id="name" class="input-text"	type="text" value="">
					 
					 <span>用户角色：</span>
					 <select id="userRole">
						
						   <option value="0">--请选择--</option>
						  
						
	        		</select>
					 <input type="hidden" name="pageIndex" value="1"/>
					 <input	value="查 询" type="submit" id="searchbutton">
					 <a href="toUserAdd" >添加用户</a>
            </div>
            <!--用户-->
            <table class="providerTable" cellpadding="0" cellspacing="0">
                <tr class="firstTr">
                    <th width="10%">用户编码</th>
                    <th width="20%">用户名称</th>
                    <th width="10%">性别</th>
                    <th width="10%">生日</th>
                    <th width="10%">电话</th>
                    <th width="10%">用户角色</th>
                    <th width="30%">操作</th>
                </tr>
                   
			
			</table>
			<div class="page-bar">
				<ul class="page-num-ul clearfix">
					<li>共<span id="count"></span>条记录&nbsp;&nbsp; <span id="currentPage"></span>/<span id="totalPage"></span>页</li>
					
						<a href="javascript:void(0)" class="first">首页</a>
						<a href="javascript:void(0)" class="prev">上一页</a>
				
					
						<a href="javascript:void(0)" class="next">下一页</a>
						<a href="javascript:void(0)" class="last">最后一页</a>
					
					&nbsp;&nbsp;
				</ul>
			 <span class="page-go-form"><label>跳转至</label>
		     <input type="text" name="inputPage" id="inputPage" class="page-key" />页
		     <button type="button" class="page-btn" onClick=''>GO</button>
			</span>
			</div> 
		  	
        </div>
    </section>

	<!--点击删除按钮后弹出的页面-->
	<div class="zhezhao"></div>
	<div class="remove" id="removeUse">
		<div class="removerChid">
			<h2>提示</h2>
			<div class="removeMain">
				<p>你确定要删除该用户吗？</p>
				<a href="javascript:void(0)" id="yes">确定</a>
				<a href="javascript:void(0)" id="no">取消</a>
			</div>
		</div>
	</div>

<%@include file="../foot.jsp" %>